<template>
	<view class="content">
		<image class="logo" src="/static/RTAB8$_R7R6@A9_@X~4~3TQ.png"></image>
		<uni-forms labelWidth="50" ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item required label="账号" name="username">
				<uni-easyinput type="text" v-model="formData.username" placeholder="请输入账号" />
			</uni-forms-item>
			<uni-forms-item required label="密码" name="password">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required label="坐标" name="coordinate">
				<uni-easyinput suffixIcon="location-filled" @iconClick="chooseLocation" type="text"
					v-model="formData.coordinate" placeholder="点击左侧自动获取"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item required label="地址" name="address">
				<uni-easyinput type="text" v-model="formData.address" placeholder="点击上边自动获取"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit">注册</button>
	</view>
</template>

<script>
	import {
		register,
		geocoder
	} from '@/apis/register.js';
	import Base64 from 'base-64';
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					username: '',
					password: '',
					coordinate: '',
					address: ''
				},
				rules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入身份证号或手机号'
							},
							{
								minLength: 11,
								maxLength: 18,
								errorMessage: '账号为身份证号或手机号'
							}
						]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					coordinate: {
						rules: [{
							required: true,
							errorMessage: '坐标不能为空'
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '地址不能为空'
						}]
					}
				}
			};
		},

		methods: {
			submit() {
				this.$refs.form
					.validate()
					.then(async userInfo => {
						console.log('正确信息：', userInfo);
						// 密码加密
						const data = {
							...userInfo,
							password: Base64.encode(userInfo.password)
						};
						// 注册
						const res = await register(data);
						console.log(res);
						if (!res.data.success) {
							return uni.showToast({
								title: res.data.msg,
								icon: 'error'
							});
						}

						// uni.setStorageSync('token',res.data.token)
						await uni.setStorage({
							key: 'token',
							data: res.data.token,
							success: function() {
								console.log('success');
							}
						});
						// 成功提示
						uni.showToast({
							title: '注册成功',
							icon: 'success',
							duration: 2000
						});
						// 跳转home页
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/home/home'
							});

						}, 2000)
					})
					.catch(err => {
						// console.log('错误信息：', err);
						console.log('错误信息：');
					});
			},

			chooseLocation() {
				uni.chooseLocation({
					success: async res => {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						if (!res.address) return console.log('获取地址失败');
						// 经纬度
						this.formData.coordinate = `${res.longitude},${res.latitude}`;
						// 坐标查地址
						const result = await geocoder({
							coordinate: `${res.latitude},${res.longitude}`
						});
						console.log('坐标查地址', result);
						if (result.data.status) return console.log('获取地址失败1');
						const {
							nation,
							province,
							city,
							district
						} = result.data.result.address_component;
						// 地址
						this.formData.address = `${nation}-${province}-${city}-${district}`;
						console.log(confirm);
					}
				});
			}
		}
	};
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 400rpx;
		width: 400rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
</style>
